<!--
  Copyright (c) 2018-2999 广州市蓝海创新科技有限公司 All rights reserved.

  https://www.mall4j.com/

  未经允许，不可做商业用途！

  版权所有，侵权必究！
-->

<template>
  <div class="Mall4j floor-page-container">
    <floor-title-component
      :config="config"
      :operation-type="operationType"
    />
  </div>
</template>
<script setup>
import floorTitleComponent from '../goods-component/floor-title-component/index.vue'

const props = defineProps({
  itemComponent: {
    type: Object,
    default: () => {}
  },
  operationType: {
    type: String,
    default: () => ''
  }
})

const config = ref({})

// 监听组件信息
watch(() => props.itemComponent, (newVal) => {
  if (JSON.stringify(newVal.rightConfigMessage) !== '{}') {
    config.value = {
      mainContent: { // 主标题
        title: newVal.rightConfigMessage.mainTitle,
        fontSize: newVal.rightConfigMessage.mainFontSize + 'px',
        color: newVal.rightConfigMessage.mainTextColor
      },
      subContent: { // 副标题
        title: newVal.rightConfigMessage.subTitle,
        fontSize: newVal.rightConfigMessage.subFontSize + 'px',
        color: newVal.rightConfigMessage.subTextColor
      },
      showSubTitle: 0, // 是否展示副标题
      background: newVal.rightConfigMessage.bgColor, // 背景颜色
      marginTop: newVal.rightConfigMessage.marginTop + 'px', // 上边距
      marginBottom: newVal.rightConfigMessage.marginBottom + 'px', // 下边距
      showMore: newVal.rightConfigMessage.more, // 是否展示更多
      path: {
        link: newVal.rightConfigMessage.path.link, // 更多的链接
        name: newVal.rightConfigMessage.path.name,
        type: newVal.rightConfigMessage.path.type
      },
      moreTextColor: newVal.rightConfigMessage.moreTextColor // 查看更多的文字颜色
    }
  }
}, { immediate: true, deep: true })

</script>
